<template>33
  <el-input
    ref="$ref"
    v-model="value"
    clearable
    @input="myInput"
    @handleCompositionUpdate="myUpdate"
    v-bind="$attrs"
    :prefix-icon="Search"
  >
    <!--调用UI库组件的插槽-->
    <template 
      v-for="(item, key, index) in $slots"
      :key="index"
      #[key]
    >
      <!--显示父组件传递的插槽-->
      <slot :name="key"></slot>
    </template>
  </el-input>
</template>

<script>
  import { ref, defineComponent, onMounted, computed } from 'vue'
  import { ElInput } from 'element-plus'
  import { Edit, Search } from '@element-plus/icons'
  import { lifecycle } from '/nf-ui-core'
 
  export default defineComponent({
    name: '传声筒',
    inheritAttrs: false,
    components: {
      ElInput,
      Edit,
      Search
    },
    props: {
      modelValue: [String, Number, Object],
      model: Object, // 表单model
      colName: String, // 要使用的属性名称
      events: Object // 事件、方法的集合
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      lifecycle('传声筒控件', true)

      const emit = context.emit
      const events = props.events
      const $ref = ref(null)

      // 设置方法
      events.focus = () => {
        // $ref.value.focus()
      }
      onMounted(() => {
        console.log('子组件的 dom', $ref.value)
        // $ref.value.focus()
      })
      console.log('props：', props)
      console.log('ctx：', context)
      console.log('emit：', emit)

      // v-model 的中转
      const value = computed({
        set: (val) => {
          context.emit('update:modelValue', val)
        },
        get: () => {
          return props.modelValue
        }
      })

      //
      const myInput = (val) => {
        console.log('控件内部的 input事件：', val)
        events.myInput(val) // 立即执行
      }
 
      const myUpdate = (val) => {
        console.log('控件内部的 handleCompositionUpdate 事件：', val)

      }
      // const focus = () => {
      //  refInput222.value.focus()
      // }

      return {
        $ref,
        value,
        myUpdate,
        // focus,
        myInput
      }
    }
  })
</script>
